<template>
	<view>
		<view class="goods-list">
			<!-- 使用block控制循环等条件的 它本身不会被渲染 
			仅仅只是一个包裹性作用 让结构更加清晰 但它不支持绑定事件-->
			<view @click="gotoDetail(goods)" v-for="(goods,i) in goodsList" :key="i">
				<my-goods :goods="goods"></my-goods>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		// 监听上拉事件
		onReachBottom(){
			// 判断数据是否加载完毕 
			if(this.queryInfo.pagenum * this.queryInfo.pagesize >= this.total){
				return uni.$showMsg('没有更多数据了')
			}
			
			// 判断节流阀 为true则说明正在请求数据 直接return回去
			if(this.isLoading) return
			
			this.queryInfo.pagenum++
			// console.log(this.queryInfo.pagenum);
			// if(!this.isLoading) return
			this.getGoodsList()
		},
		// 监听下拉事件
		onPullDownRefresh(){
			// 重置关键数据
			this.queryInfo.pagenum = 1
			this.total = 0
			this.isLoading = false
			this.goodsList = []
			// 重新发起数据请求
			this.getGoodsList(()=>uni.stopPullDownRefresh())
		},
		onLoad(option) {
			console.log(option);
			this.queryInfo.query = option.query || ''
			this.queryInfo.cid = option.cid || ''
			console.log(this.queryInfo);
			this.getGoodsList()
		},
		data() {
			return {
				// 请求查询对象
				queryInfo: {
					query: '',
					cid: '',
					pagenum: 1,
					pagesize: 10
				},
				// 商品列表数据
				goodsList: [],
				// 商品总数
				total: 0,
				// 节流阀
				isLoading: false
				
			};
		},
		methods: {
			// 获取商品列表
			async getGoodsList(cb) {
				// 判断回调函数是否存在 存在就调用
				cb && cb()
				// 在请求数据之前打开节流阀 表示我们正在请求
				this.isLoading = true
				const {
					data: res
				} = await uni.$http.get('/api/public/v1/goods/search', this.queryInfo)
				if (res.meta.status !== 200) return uni.$showMsg()
				// this.goodsList = res.message.goods
				// 新旧数据拼接
				this.goodsList = [...this.goodsList,...res.message.goods]
				this.total = res.message.total
				console.log(this.goodsList);
				// 数据请求完毕 将节流阀关闭  
				this.isLoading = false
			},
			// 根据商品id跳转相应的商品详情页
			gotoDetail(goods){
				uni.navigateTo({
					url:'/subpkg/goods_detail/goods_detail?goods_id='+goods.goods_id
				})
			}
		}
	}
</script>

<style lang="scss">


</style>
